<template>
  <div class="about">
    <div class="center">
      <div class="left">
        <img :src="p.maxpic" alt="" />
        <div class="mask"></div>
        <div class="big">
          <img :src="p.maxpic" class="bigImg" />
        </div>
      </div>
      <div class="right">
        <div class="title">{{ p.pname }}</div>
        <div class="row"></div>
        <div class="details">
          {{ p.details }}
        </div>
        <div class="js">
          -&nbsp;材&nbsp;&nbsp;质：{{ p.material }}<br />
          -&nbsp;使用范围：{{ p.usable }}<br />
          -&nbsp;注意事项：{{ p.attention }}
        </div>
        <div class="price">
          <span>¥{{ p.oldprice }}</span>
          ¥{{ p.price }}
        </div>
        <div class="bottom">
          <button
            @click="
              add(n, uid, p.pid);
              count();
            "
          >
            加入购物车
          </button>
          <i class="bottom_right">
            <span @click="n > 1 ? n-- : (n = 1)">-</span>
            <span>{{ n }}</span>
            <span @click="n++">+</span>
          </i>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["pid"],
  data() {
    return {
      n: 1,
      p: {},
    };
  },
  methods: {
    ...mapMutations(["setCounts"]),
    count() {
      console.log(this.counts, this.counts);
      var counts = parseInt(this.counts) + parseInt(this.n);
      sessionStorage.setItem("counts", counts);
      this.setCounts(counts);
      console.log(counts);
    },
    // 添加购物车竖脊肌
    add(count, uid, pid) {
      if (this.uname == "") {
        this.$alert("检测到您未登录，请先登录", "温馨提示", {
          callback: () => {
            this.$router.push("/login");
          },
        });
      } else {
        this.axios
          .get(`/cart/add?uid=${uid}&pid=${pid}&count=${count}`)
          .then((res) => {
            // console.log(res);
            this.$message({
              message: res.data.msg,
              type: "success",
            });
          });
      }
    },
    fdj() {
      // console.log(1);
      var box = document.querySelector(".center .left");
      var mask = document.querySelector(".mask");
      var big = document.querySelector(".big");
      console.log(box, mask, big);
      // 功能一：实现鼠标移动到box盒子显示隐藏
      box.addEventListener("mouseover", function () {
        mask.style.display = "block";
        big.style.display = "block";
      });
      box.addEventListener("mouseout", function () {
        mask.style.display = "none";
        big.style.display = "none";
      });

      // 功能二：计算出鼠标在盒子里的坐标并移动mask
      box.addEventListener("mousemove", function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y)
        // mask.style.transform = "translate(-50%,-50%)";
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        var maskMax = box.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
          maskX = 0;
        } else if (maskX >= maskMax) {
          maskX = maskMax;
        }
        if (maskY <= 0) {
          maskY = 0;
        } else if (maskY >= maskMax) {
          maskY = maskMax;
        }
        mask.style.left = `${maskX}px`;
        mask.style.top = `${maskY}px`;
        // 功能三：根据mask比例来移动大图片
        var bigImg = document.querySelector(".bigImg");
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        var bigX = (maskX * bigMax) / maskMax;
        var bigY = (maskY * bigMax) / maskMax;
        bigImg.style.left = `${-bigX}px`;
        bigImg.style.top = `${-bigY}px`;
      });
    },
  },
  mounted() {
    // window.scrollTo(0, 0);

    this.fdj();
    this.axios
      .get("/products/details", {
        params: {
          pid: this.pid,
        },
      })
      .then((result) => {
        console.log(result.data[0]);
        this.p = result.data[0];
      });
  },
  computed: {
    ...mapState(["uid", "uname", "counts"]),
  },
  // 放大镜
};
</script>





<style scoped>
/* 放大镜start */
.mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 260px;
  background-color: #eee;
  opacity: 0.5;
  border: 1px solid #ccc;
  cursor: move;
  z-index: 99;
}

.big {
  display: none;
  position: absolute;
  left: 560px;
  top: 0;
  width: 430px;
  height: 430px;
  /* background-color: orangered; */
  overflow: hidden;
  border: 1px solid #ccc;
}

.big img {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px !important;
}
/* 放大镜end */
.about {
  width: 100%;
  height: 800px;
  background-color: #f2f2f2;
}
.about .center {
  width: 1200px;
  height: 600px;
  /* background-color: #eee; */
  padding: 40px;
  margin: 0 auto;
}
.about .center .left,
.about .center .right {
  float: left;
}
.about .center .left {
  position: relative;
  width: 556px;
  height: 556px;
}
.about .center .left img {
  width: 100%;
}
.about .center .right {
  width: 556px;
  height: 337px;
  box-sizing: border-box;
  padding-left: 60px;
  /* border-left: 3px solid #000; */
}
.about .center .right .title {
  font-size: 20px;
  color: #0c0c0c;
  margin-bottom: 30px;
}
.about .center .right .row {
  width: 50px;
  height: 3px;
  background-color: #ddd;
  margin: 15px 0 30px;
}
.about .center .right .details {
  font-size: 13px;
  color: #666;
  line-height: 24px;
}
.about .center .right .js {
  font-size: 13px;
  color: #666;
  line-height: 24px;
  margin-bottom: 30px;
}
.about .center .right .price {
  font-size: 24px;
  font-family: "宋体";
  color: #000;
  margin-bottom: 30px;
}
.about .center .right .price span {
  font-size: 18px;
  color: #ccc;
  text-decoration: line-through;
}
.about .center .right .bottom > button {
  width: 152px;
  height: 46px;
  color: white;
  background-color: rgb(209, 159, 79);
  border: 0;
}
.about .center .right .bottom > button:hover {
  background-color: #bd8448;
}
.about .center .right .bottom_right {
  display: inline-block;
  height: 46px;
  text-align: center;
  margin-left: 30px;
  color: #000;
}

.about .center .right .bottom .bottom_right span {
  display: inline-block;
  width: 46px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #e0e0e0;

  line-height: 46px;
  cursor: pointer;
}
.about .center .right .bottom .bottom_right span:nth-child(2) {
  border-left: 0;
  border-right: 0;
}
</style>
